<template>
	<div class="content">
		<div style="background-color: white;height: auto;width: 100%;">
			<div style="height: 20px;width: 100%;"></div>
			<div class="row-one">
				<i v-if="order.dictCardOperator=='CARDTELECOM'" class="ali-icon " style="font-size: 48rpx;">&#xe76b;</i>
				<i v-if="order.dictCardOperator=='CARDMOBILE'"  class="ali-icon " style="font-size: 48rpx;">&#xe67d;</i>
				<i v-if="order.dictCardOperator=='CARDUNICOM'"  class="ali-icon " style="font-size: 48rpx;">&#xe61a;</i>
				<div style="font-size: 32rpx;margin-left: 5px;">{{order.cardNumber}}</div>
			</div>
			<div class="row-two">
				<div style="font-weight: bold;font-size: 32rpx;">交易金额</div>
				<div style="font-weight: bold;font-size: 50rpx;">{{order.price}}元</div>
			</div>
			<div class="line"></div>
		</div>
		
		<div class="detail-list">
			<div style="height: 1px;width: 100%;"></div>
			<div class="row-item">
				<div class="bengin-cel">订单号</div>
				<div class="end-cel">{{order.id}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">创建时间</div>
				<div class="end-cel">{{order.insertTimeTime}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">订单状态</div>
				<div class="end-cel">{{order.dictStatusName}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">付款通道</div>
				<div class="end-cel">{{order.dictPayTunnelName}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">付款用户昵称</div>
				<div class="end-cel">{{order.nickName}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">购买数量</div>
				<div class="end-cel">{{order.amount}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">生效时间</div>
				<div class="end-cel">{{order.dictIsPreStorage}}</div>
			</div>
		
			<div class="row-item">
				<div class="bengin-cel">备注:</div>
			</div>
			<div class="row-item">
				{{order.remark}}
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				orderDetailUrl:'/customer-order/getDetail',
				order:{}
			}
		},
		async onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			let obj = await this.$req.userData(this.orderDetailUrl,{id:option.id})
			if(obj.data.dictIsPreStorage=="YES"){
				obj.data.dictIsPreStorage = "次月"
			}else{
				obj.data.dictIsPreStorage = "立即生效"
			}
			if(obj.data.dictCardOperator=='CARDTELECOM'){
				obj.data.operatorIcon="&#xe76b;"
			}else if(obj.data.dictCardOperator=='CARDMOBILE'){
				obj.data.operatorIcon="&#xe67d;"
			}else if(obj.data.dictCardOperator=='CARDUNICOM'){
				obj.data.operatorIcon="&#xe61a;"
			}
			
			this.order = obj.data
		},
		
	}
</script>

<style lang="scss">
	$left-10 :18px;
	.content {
		background-color: $uni-bg-color-grey;
		min-height: calc(100vh - 47px);
		font-size: 24rpx;
	}

	.row-one {
		display: flex;
		width: 100%;
		align-items: center;
		margin-left: $left-10;
	}

	.row-two {
		display: flex;
		justify-content: space-between;
		margin-left: $left-10;
		margin-right: $left-10;
		align-items: center;
		margin-top: 20px;

	}

	.line {
		width: 100%;
		border-bottom: 10px solid #f5f5f5;
		margin-top: 20px;
	}

	.detail-list {
		background-color: white;
		width: 100%;
		height: auto;
	}
	.row-item{
		padding-left: $left-10;
		padding-right: $left-10;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 32rpx;
		.bengin-cel{
			color:#cacaca
		}
	}
</style>
